<template>
  <div class="top-bar">
    <div class="wrap top-bar-wrap">
      <div class="l">欢迎来到叩丁严选</div>
      <div class="r">
        <ul>
          <li @click="toshowtoast">
            <img class="avatar" width="26" height="26" :src="userinfo.headImg" alt="" />
            用户名:{{ userinfo.nickName }}
          </li>
          <li>我的鸡腿：{{ userinfo.coin }}</li>
          <li>获取鸡腿</li>
          <li>叩丁狼官网</li>
          <li class="login-btn" @click="tologin" v-show="!islogined">登录</li>
          <li class="cart-btn" v-show="islogined">
            <img src="@/assets/img/Shopping.png" alt="">
            <span @click="$router.push('/user/cart')">购物车</span>
            <b>{{ carttotal }}</b>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapState, mapActions } from "vuex";
import { weixinloginapi } from "@/request/api";
import Cookie from "js-cookie";
export default {
  data() {
    return {
    };
  },
  watch: {
    '$router.path': {
      handler(newVal, oldVal) {
        let mytoken = Cookie.get('x-auth-token')
        // if(mytoken){
        //   this.chanislogined(true)
        // }else{
        //   this.chanislogined(false)
        // }
        this.chanislogined(Boolean(mytoken))
      }
    }
  },
  created() {
    this.$nextTick().then(async () => {
      let mycode = this.$route.query.code;
      // console.log('mycode',mycode);
      if (!mycode) {
        let mytoken = Cookie.get('x-auth-token')
        // console.log('mytoken',Boolean(mytoken));
        this.chanislogined(Boolean(mytoken))
        if (mytoken) {
          // console.log('执行了用户信息请求');
          this.asyncchanuserinfo()
        } else {
          this.inituserinfo()
          // console.log('获取初始用户信息');
        }
        return
      }
      let res = await weixinloginapi({
        code: mycode
      })
      if (res.code == 0) {
        // alert('登录成功')
        this.aysncchanisshowtoast({
          msg: '登录成功',
          type: 'success'
        })
        this.close()

        Cookies.set('x-auth-token', res["x-auth-token"], { expires: expires }); // 10 秒后失效
        // localStorage.setItem('x-auth-token', res['x-auth-token'])
        this.chanislogined(true)
        // if (uuid) {
        //   localStorage.removeItem('uuid')
        //   this.$router.push(this.$route.path)
        // }
        this.$router.push(this.$route.path)
        this.asyncchanuserinfo()
      }
      else if (res.code == 400) {
        this.aysncchanisshowtoast({
          msg: '失效',
          type: 'warning'
        })
        this.chanisShowLoginModal(true)
      }
      else if (res.code == 407) {
        this.aysncchanisshowtoast({
          msg: '请绑定手机号',
          type: 'warning'
        })
        this.chanisShowLoginModal(true)
        localStorage.setItem('uuid', res.uuid)

      }
    });
  },
  computed: {
    ...mapState({
      islogined: (state) => state.loginstatus.islogined,
      carttotal: (state) => state.userinfo.cartTotal,
      userinfo: (state) => state.userinfo.userinfo,
    }),
  },
  mounted() {
  },
  methods: {
    ...mapMutations({
      chanisShowLoginModal: "showLoginModal/chanisShowLoginModal",
      chanisshowtoast: "showtoast/chanisshowtoast",
      chanislogined: "loginstatus/chanislogined",
      inituserinfo: 'userinfo/inituserinfo'
    }),
    ...mapActions({
      aysncchanisshowtoast: "showtoast/aysncchanisshowtoast",
      asyncchanuserinfo: "userinfo/asyncchanuserinfo"
    }),
    tologin() {
      this.chanisShowLoginModal(true)
    },
    toshowtoast() {
      this.aysncchanisshowtoast({
        msg: '11111!!!!!!',
        type: 'success'
      })

    }
  },
};
</script>

<style lang="scss" scoped>
.top-bar {
  height: 40px;
  background-color: #242b39;
  color: #fffefe;
  line-height: 40px;

  .top-bar-wrap {
    height: 40px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-family: SourceHanSansSC;
    font-weight: 300;
    color: #fffefe;

    .r {
      ul {
        display: flex;

        li {
          cursor: pointer;
          display: flex;
          align-items: center;
          margin-left: 20px;

          .avatar {
            border-radius: 50%;
            margin-right: 10px;
          }

          &.login-btn {
            width: 124px;
            height: 40px;
            background-color: #0a328e;
            justify-content: center;
          }
        }
      }
    }
  }
}

.cart-btn {
  width: 124px;
  height: 40px;
  background-color: #0a328e;
  justify-content: center;

  img {
    margin-right: 10px;
  }

  b {
    width: 20px;
    height: 20px;
    background-color: #f40;
    line-height: 20px;
    border-radius: 50%;
    margin-left: 8px;
    text-align: center;
  }
}
</style>